<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<div th:replace="fragment/front/meta"></div>
        <title th:utext="${application.siteName + ' - 头像设置'}"></title>
        <div th:replace="fragment/front/css"></div>
        <link rel="stylesheet" type="text/css" th:href="@{/statics/page/css/front/index/index.css}" />
        <link rel="stylesheet" type="text/css" th:href="@{/statics/page/css/front/user/left.css}" />
        <link rel="stylesheet" type="text/css" th:href="@{/statics/page/css/front/user/icon.css}" />
        <link rel="stylesheet" type="text/css" th:href="@{/statics/plugin/cropper/cropper.min.css}" >
	</head>
	<body>
		<div th:replace="fragment/front/nav"></div>
		
		<div class="site-container">
		    <div class="container">
			    <div class="row">
					<div class="col-xs-3 col-sm-3 col-md-2 sidebar">
						<ul class="nav nav-sidebar">
							<li><a th:href="@{/front/user/datum.html}">个人资料</a></li>
							<li class="active"><a th:href="@{/front/user/icon.html}">头像设置</a></li>
							<li><a th:href="@{/front/user/message.html}">我的消息</a></li>
							<li><a href="">安全设置</a></li>
						</ul>
					</div>
					<div class="col-xs-9 col-sm-9 col-md-10 main">
				  	  	<fieldset>
				  	  	  	<legend>头像设置</legend>
					      	<ul class="nav nav-tabs" role="tablist">
						      	<li role="presentation" class="active"><a href="#custom-icon" aria-controls="custom-icon" role="tab" data-toggle="tab">自定义头像</a></li>
						      	<li role="presentation"><a href="#hot-icon" aria-controls="hot-icon" role="tab" data-toggle="tab">热门推荐头像</a></li>
						  	</ul>
							<div class="tab-content marginT20">
								<div role="tabpanel" class="tab-pane active" id="custom-icon">
									<form class="avatar-form" th:action="@{/file/multi.html}"
											enctype="multipart/form-data" method="post">
										<div id="crop-avatar" style="display:none">
											<div class="avatar-view" title="Change Logo Picture">
												<img th:src="@{/statics/page/image/front/article/article.author.png}" alt="Logo">
											</div>
										</div>
										<div class="avatar-body">
											<div class="avatar-upload">
												<input class="avatar-src"   name="avatar_src" type="hidden">
												<input class="avatar-data"  name="avatar_data" type="hidden">
												<label for="avatarInput">图片上传</label> 
												<input class="avatar-input" name="avatar_file" type="file">
											</div>
											<div class="row">
												<div class="col-md-9">
													<div class="avatar-wrapper"></div>
												</div>
												<div class="col-md-3">
													<div class="avatar-preview preview-lg"></div>
													<div class="avatar-preview preview-md"></div>
													<div class="avatar-preview preview-sm"></div>
												</div>
											</div>
											<div class="row avatar-btns">
												<div class="col-md-9">
													<div class="btn-group">
														<button class="btn" data-method="rotate" data-option="-90" type="button" title="Rotate -90 degrees">
															<i class="fa fa-undo"></i> 向左旋转
														</button>
													</div>
													<div class="btn-group">
														<button class="btn" data-method="rotate" data-option="90" type="button" title="Rotate 90 degrees">
															<i class="fa fa-repeat"></i> 向右旋转
														</button>
													</div>
												</div>
												<div class="col-md-3">
													<button class="btn btn-success btn-block avatar-save" type="submit">
														<i class="fa fa-save"></i> 保存修改
													</button>
												</div>
											</div>
										</div>
									</form>
								</div>
						      	<div role="tabpanel" class="tab-pane" id="hot-icon">...</div>
						  	</div>
			      	  	</fieldset>
				  	</div>
		        </div>
		    </div>
		</div>
	
		<div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>
		
		<div th:replace="fragment/front/footer"></div>
        <div th:replace="fragment/front/script"></div>
        <script type="text/javascript" th:src="@{/statics/plugin/cropper/cropper.min.js}"></script>
        <script type="text/javascript" th:src="@{/statics/page/js/front/user/icon.custom.js}"></script>
        <script type="text/javascript" th:src="@{/statics/page/js/front/user/icon.js}"></script>
    </body>
</html>